<template>
	<view class="itu-quick-access-wrap" :style="[{backgroundColor: bgColor, padding, borderRadius}]" ref="tQuickAccess">
		<scroll-view class="itu-quick-access-scroll" :style="[{height: `${height}rpx`}]" @scroll="changeScroll" :show-scrollbar="false" enable-flex scroll-x>
			<view class="itu-quick-access-cell" :style="[{ width: `${100 / size}%` }]" v-for="(item, index) in list" :key="index">
				<slot :data="item"></slot>
			</view>
			<slot name="right"></slot>
		</scroll-view>
		<view class="itu-quick-access-scroll-bar" :style="{ width: `${indicatorWidth}rpx` }" v-if="list.length > size">
			<view class="itu-quick-access-scroll-line" :style="[{ left: `${scrollBarLeft}rpx`, background: defaultColor, width: `${indicatorBarWidth}rpx` }]"></view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			// 背景色
			bgColor: {
				type: String,
				default: 'rgba(0,0,0,0)'
			},
			// 边距
			padding: {
				type: String,
				default: '0rpx 15rpx'
			},
			//圆角
			borderRadius: {
				type: String,
				default: '15rpx'
			},
			// 主题色
			themeColor: {
				type: String,
				default: ''
			},
			// 列表数据
			list: Array,
			// 展示数量
			size: {
				type: Number,
				default: 5
			},
			// 高度
			height: {
				type: Number,
				default: 180
			},
			// 滚动条宽度
			indicatorWidth: {
				type: Number,
				default: 60
			},
			indicatorBarWidth: {
				type: Number,
				default: 30
			}
		},
		data() {
			return {
				defaultColor: "",
				scrollBarLeft: 0,
				scrollWidth: 0,
			};
		},
		mounted() {
			this.defaultColor = this.themeColor || this.$itu.color.primary;
			this.init();
		},
		methods: {
			init() {
				this.getComponentWidth()
			},
			// 查询节点信息
			// 目前此方法在支付宝小程序中无法获取组件跟接点的尺寸，为支付宝的BUG
			// 解决办法为在组件根部再套一个没有任何作用的view元素
			getRect(selector, all) {
				return new Promise((resolve) => {
					uni.createSelectorQuery()
						.in(this)[all ? 'selectAll' : 'select'](selector)
						.boundingClientRect((rect) => {
							if (all && Array.isArray(rect) && rect.length) {
								resolve(rect)
							}
							if (!all && rect) {
								resolve(rect)
							}
						})
						.exec()
				})
			},
			changeScroll(e) {
				const scrollLeft = e.detail.scrollLeft,
					scrollWidth = e.detail.scrollWidth,
					barAllMoveWidth = this.indicatorWidth - this.indicatorBarWidth
				this.scrollBarLeft = scrollLeft / (scrollWidth - this.scrollWidth) * barAllMoveWidth
			},
			// 获取组件的宽度
			async getComponentWidth() {
				// 延时一定时间，以获取dom尺寸
				await uni.$itu.sleep(30)
				// #ifndef APP-NVUE
				this.getRect('.itu-quick-access-wrap').then(size => {
					this.scrollWidth = size.width
				})
				// #endif

				// #ifdef APP-NVUE
				const ref = this.$refs['tQuickAccess']
				ref && dom.getComponentRect(ref, (res) => {
					this.scrollWidth = res.size.width
				})
				// #endif
			},
			click(e) {
				this.$emit("click", e)
			}
		}
	};
</script>
<style lang="scss">
	.itu-quick-access {
		&-scroll {
			display: flex;
			flex-wrap: nowrap;
			height: auto;

			/deep/ .uni-scroll-view-content {
				display: flex !important;
				flex-direction: row;
			}

			&-bar {
				background: rgba(0, 0, 0, 0.1);
				height: 8rpx;
				border-radius: 5rpx;
				position: relative;
				left: 50%;
				transform: translate(-50%, 0);
				bottom: 0;
				transition: all 0.5s ease-in;
				top: -10rpx;
			}

			&-line {
				content: ' ';
				height: 8rpx;
				border-radius: 5rpx;
				position: absolute;
				top: 0;
			}
		}

		&-cell {
			display: flex;
			flex-direction: column;
			align-items: center;
			flex-shrink: 0;
		}

		&-name {
			font-size: 25rpx;
			margin-top: 10rpx;
		}
	}
</style>